<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
	<link href="./css/bootstrap.css" rel="stylesheet" type="text/css" />
</h:head>

<f:event listener="#{accountManageBean.onLoad}" type="preRenderView"></f:event>

<body>
	<ui:include src="./header.xhtml" />
	<div id="content-outer">
		<div id="content">

			<!--  start page-heading -->
			<div id="page-heading">
				<h1>Account Management</h1>
			</div>
			<!-- end page-heading -->
			<h:form id="mainform" action="">
				<h1 style="padding: 20px; text-align: center">Add New Account</h1>
				<!-- 				<div id="content-table-inner"> -->


				<div class="row-fuilt">
					<div class="offset4">
					<div class="controls-row ">
							<div class="control-group">
								<label
									style="width: 150px; float: left; color: black; text-align: left">
									Account Type:</label>
								<h:selectOneMenu value="#{accountManageBean.accountType}" onchange="submit()"
								valueChangeListener="#{accountManageBean.showCurrency}">
									<f:selectItem itemValue="deposit" itemLabel="Deposit Account"></f:selectItem>
									<f:selectItem itemValue="saving" itemLabel="Saving Account"></f:selectItem>
									
								</h:selectOneMenu>
							</div>
						</div>
						<div class="controls-row ">
						
							<div class="control-group">
								<label
									style="width: 80px; float: left; color: black; text-align: left">
									First Name:</label>
								<h:inputText value="#{accountManageBean.firstName}"
									style="float: left; width: 80px" />
								<label
									style="width: 80px; float: left; color: black; text-align: left">
									Mid Name:</label>
								<h:inputText value="#{accountManageBean.midName}"
									style="float: left; width: 80px" />
								<label
									style="width: 80px; float: left; color: black; text-align: left">
									Last Name:</label>
								<h:inputText value="#{accountManageBean.lastName}"
									style="float: left; width: 80px" />
							</div>
						</div>

						<div class="controls-row ">
							<div class="control-group">
								<label
									style="width: 150px; float: left; color: black; text-align: left">
									ID Card Number:</label>
								<h:inputText value="#{accountManageBean.idCardNumber}"
									style="float: left; width: 365px" maxlength="12">
									<f:ajax event="keyup" render="IDCardNumber" />
								</h:inputText>
								<h:outputText id="IDCardNumber"
									value="#{accountManageBean.idCardNumberStatus}" escape="false" />
							</div>
						</div>
						<div class="controls-row ">
							<div class="control-group">
								<label
									style="width: 150px; float: left; color: black; text-align: left">
									Address:</label>
								<h:inputText value="#{accountManageBean.address}"
									style="float: left; width: 365px" />
							</div>
						</div>
						<div class="controls-row ">
							<div class="control-group">
								<label
									style="width: 150px; float: left; color: black; text-align: left">
									Address 2:</label>
								<h:inputText value="#{accountManageBean.address2}"
									style="float: left; width: 365px" />
							</div>
						</div>
						<div class="controls-row ">
							<div class="control-group">

								<label
									style="width: 150px; float: left; color: black; text-align: left">
									Phone :</label>
								<h:inputText value="#{accountManageBean.phone}"
									style="float: left; width: 200px" maxlength="12" size="12">
									<f:ajax event="keyup" render="phoneStatus" />
								</h:inputText>
								<h:outputText id="phoneStatus"
									value="#{accountManageBean.phoneStatus}" escape="false" />
							</div>
						</div>
						<div class="controls-row ">
							<div class="control-group">

								<label
									style="width: 150px; float: left; color: black; text-align: left;">
									Phone 2 :</label>
								<h:inputText value="#{accountManageBean.phone2}"
									style="float: left; width: 200px;" maxlength="12" size="12">
									<f:ajax event="keyup" render="phoneStatus2" />
								</h:inputText>
								<h:outputText id="phoneStatus2"
									value="#{accountManageBean.phoneStatus2}" escape="false" />
							</div>
						</div>

						<div class="controls-row ">
							<div class="control-group">
								<label
									style="width: 150px; float: left; color: black; text-align: left">
									Email :</label>
								<h:inputText value="#{accountManageBean.email}"
									style="float: left; width: 365px">
									<f:ajax event="keyup" render="EmailStatus" />
								</h:inputText>
								<h:outputText id="EmailStatus" escape="false"
									value="#{accountManageBean.emailStatus}" />
							</div>
						</div>
						<div class="controls-row ">
							<div class="control-group">
								<label
									style="width: 150px; float: left; color: black; text-align: left">
									Email 2:</label>
								<h:inputText value="#{accountManageBean.email2}"
									style="float: left; width: 365px">
									<f:ajax event="keyup" render="EmailStatus2" />
								</h:inputText>
								<h:outputText id="EmailStatus2" escape="false"
									value="#{accountManageBean.emailStatus2}" />
							</div>
						</div>
						<div class="controls-row ">
							<div class="control-group">
								<label
									style="width: 150px; float: left; color: black; text-align: left">
									Account Balance:</label>
								<h:inputText value="#{accountManageBean.accountBalance}"
									style="float: left; width: 365px">
									<f:ajax event="keyup" render="BalanceStatus" />
								</h:inputText>
								<h:outputText id="BalanceStatus" escape="false"
									value="#{accountManageBean.balanceStatus}" />
							</div>
						</div>
						
						<ui:fragment rendered="#{accountManageBean.showCurrency == 'show'}">
						<div class="controls-row ">
							<div class="control-group">
								<label
									style="width: 150px; float: left; color: black; text-align: left">
									Currency Type:</label>
							<h:selectOneMenu value="#{accountManageBean.currency}">
							 <f:selectItem  itemValue="usd" itemLabel="USD"></f:selectItem>
							 <f:selectItem  itemValue="vnd" itemLabel="VND"></f:selectItem>
						</h:selectOneMenu>
									
							</div>
						</div>
						</ui:fragment>
							<ui:fragment rendered="#{accountManageBean.showCurrency == 'hide'}">
							</ui:fragment>
						<div class="controls-row ">
							<div class="control-group">
								<label
									style="width: 150px; float: left; color: black; text-align: left">
									Internet Account:</label>
								<h:inputText value="#{accountManageBean.username}"
									style="float: left; width: 300px" />
							</div>
						</div>
						<div class="controls-row ">
							<div class="control-group">
								<label
									style="width: 150px; float: left; color: black; text-align: left">
									Password :</label>
								<h:inputSecret value="#{accountManageBean.password}"
									style="float: left; width: 300px" />
							</div>
						</div>
						<div class="row-fuilt" style="margin-left: 180px">
							<h:commandButton value="Submit" type="submit"
								action="#{accountManageBean.submit}" style="width: 100px"
								class="btn btn-primary"></h:commandButton>
							<h:commandButton value="Cancel" type="button"
								action="#{accountManageBean.cancel}"
								style="width: 100px; margin-left: 30px" class="btn"
								onclick="history.back();"></h:commandButton>

						</div>
					</div>
				</div>
			</h:form>
		</div>
	</div>
</body>
</html>
